<template>
  <div class="login_container" :class="{login_mlmlh: mlmlh}">
    <v-card class="main">
      <v-row no-gutters  class="white--text jhht-font">
        <v-col cols="6" class="left">
<!--          <div  style="color: #ef9268;font-size: 18px">基于vue + vuetify的后台管理模板</div>-->
          <v-img style="position:relative;top: 420px;"  src="@/assets/logo2.0.png" contain height="80" width="150px"/>
          <v-img style="position:relative;top: -150px;left:-30px"  src="@/assets/magic.png" contain height="80" width="120"/>
        </v-col>
        <v-col cols="6" class="right">
          <v-card height="100%" flat>
            <v-card-title class="jhht-font text-h5"><strong>登录</strong> <span class="register">没有账号?点此注册</span></v-card-title>
            <v-card-text>
              <v-text-field
                  label="账号/手机号"
                  dense
                  solo-inverted
                  class="rounded-1"
                  flat
                  :rules="[
                      ()=>!!username || '用户名不能为空！'
                  ]"
                  :error-messages="errorMessages"
                  v-model="username"
                  ref="username"
              ></v-text-field>
              <v-text-field
                  label="密码"
                  dense
                  solo-inverted
                  class="rounded-1"
                  flat
                  v-model="password"
                  ref="password"
                  :rules="[
                      ()=>!!password || '密码不能为空！'
                  ]"
                  :error-messages="errorMessages"
                  type="password"
              ></v-text-field>
              <div class="three_line">
                <div class="float-left">
                  <v-checkbox
                      label="记住我"
                      class="my-0"
                  >
                  </v-checkbox>
                </div>
                <div class="float-right">
                  短信验证码登录
                </div>
              </div>
              <br/>
              <br/>
              <v-btn
                  large
                  block
                  color="#ca141d"
                  class="white--text text-sm-h6"
                  @click="handleLogin"
              >登录</v-btn>
              <div class="text-center my-7">已有帐号，忘记密码？</div>
              <v-row no-gutters>
                <v-col cols="1"></v-col>
                <v-col cols="3" class="pt-2"><v-divider/></v-col>
                <v-col cols="4" class="text-center">其他方式登录</v-col>
                <v-col cols="3" class="pt-2"><v-divider/></v-col>
                <v-col cols="1"></v-col>
              </v-row>
              <v-row>
                <v-col cols="3"></v-col>
                <v-col cols="2"><v-btn fab small elevation="0"><v-icon>mdi-qqchat</v-icon></v-btn></v-col>
                <v-col cols="2"><v-btn fab small elevation="0"><v-icon>mdi-credit-card-marker</v-icon></v-btn> </v-col>
                <v-col cols="2"><v-btn fab small elevation="0"><v-icon>mdi-wechat</v-icon></v-btn> </v-col>
                <v-col cols="3"></v-col>
              </v-row>
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>
    </v-card>
  </div>
</template>

<script>
export default {
  name: "Index",
  data: () => ({
    mlmlh: false,
    username: '',
    password: '',
    errorMessages: '',
    formHasError: false,
  }),
  computed: {
    form() {
      return {
        username: this.username,
        password: this.password,
      }
    }
  },
  methods: {
    handleLogin() {
      this.formHasError = false

      Object.keys(this.form).forEach(f => {
        if (!this.form[f]) this.formHasError = true

        this.$refs[f].validate(true)
      })

      if (!this.formHasError) {
        this.$store.dispatch('login', this.form).then(() => {
          this.mlmlh = true;
          setTimeout(() => {
            this.$router.push('/home');
          }, 300);
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">

  .login_container{
    height: 100vh;
    width: 100%;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
    position: relative;
    background-color: #ffffff;
    background-image: url("../../assets/halloween-959006_1920.jpg");
    background-repeat:no-repeat;
    background-size: cover;
    .main{
      width: 1000px;
      height: 572px;

      .left{
        width:100%;
        background-repeat:no-repeat;
        background-size: cover;
        background-image: url("../../assets/halloween-2893710_1920.jpg");
        background-color: #465569;
        height: 572px;
        padding-top: 64px;
        padding-left: 70px;
        padding-right: 70px;

      }

      .right{
        height: 572px;
        padding-top: 64px;
        padding-left: 70px;
        padding-right: 70px;

        .register{
          font-family: JHHT,serif;
          font-size: 13px;
          position: relative;
          left: 120px;
        }

        .three_line{

        }
      }
    }
  }

  .jhht-font{
    font-family: JHHT,serif;
  }

  .login_mlmlh {
    transform: scale(5);
    opacity: 0;
  }

</style>
